<template>
  <afl-loading v-if="!data.ready" :width="50" :height="50" class="afl-loading" :tip-style="{fontSize:'16px'}">
    Loading...
  </afl-loading>
  <fullScreenContainer v-else>
    <el-container class="first-container">
      <!--      <el-header class="header"></el-header>-->
      <el-container class="second-container">
        <div class="historyTable">
          <div class="historyTable-toolbar">
            <div class="menu-wrapper">
              <el-menu mode="horizontal" defaultActive="1" class="dg-view-menu">
                <el-menu-item index="1">
                  <el-icon>
                    <platform/>
                  </el-icon>
                  {{ $t('iot.historyData') }}
                </el-menu-item>
              </el-menu>
              <div class="menu-right">
                <el-form :inline="true" label-width="100px">
                  <el-row>
                    <el-col :span="4"></el-col>
                    <el-col :span="4">
                      <el-form-item :label="$t('iot.processName')" style="width: 100%;">
                        <el-select v-model="data.processName" @change="pointSelect">
                          <el-option style="padding: 0 0 0 10px"
                                     v-for="item in data.options"
                                     :key="item.value"
                                     :label="item.label"
                                     :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item :label="$t('iot.pointName')" style="width: 100%">
                        <el-select v-model="data.pointName" @change="pointSelect2">
                          <el-option style="padding: 0 0 0 10px"
                                     v-for="item in data.optionName"
                                     :key="item.value"
                                     :label="item.label"
                                     :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item :label="$t('wms.firstStatus')" style="width: 100%">
                        <el-select v-model="data.status">
                          <el-option style="padding: 0 0 0 10px"
                                     v-for="item in data.optionStatus"
                                     :key="item.value"
                                     :label="item.label"
                                     :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="5">
                      <el-form-item :label="$t('wms.date')" style="width: 100%">
                        <el-date-picker v-model="data.period" type="daterange" :range-separator="$t('wms.to')"
                                        :start-placeholder="$t('wms.startDate')" :clearable="false"
                                        :end-placeholder="$t('wms.endDate')" format="YYYY-MM-DD HH:mm:ss"
                                        value-format="YYYY-MM-DD HH:mm:ss"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="2" style="margin-left: 10px">
                      <el-form-item>
                        <el-button type="primary" @click="onSubmit">
                          <el-icon>
                            <search/>
                          </el-icon>
                          {{ $t('wms.search') }}
                        </el-button>
                        <el-button type="info" @click="onRest">
                          <el-icon>
                            <RefreshLeft/>
                          </el-icon>
                          {{ $t('wms.rest') }}
                        </el-button>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </div>
          </div>
          <div class="historyTable-content">
            <el-table border :data="data.tablesList" :fit="true" table-layout="fixed" header-align="center" stripe
                      style="flex: 1 1 auto"
                      :header-cell-style="{color:'#000',textAlign:'center',borderColor:' #CCC',background:'#f9f9f9'}"
                      :cell-style="{textAlign:'center'}">

              <el-table-column prop="ProcessName" :label="$t('iot.processName')"/>
              <el-table-column prop="ProductionLineName" :label="$t('mes.productionlineName')"/>
              <el-table-column prop="LocationName" :label="$t('iot.pointName')"/>
              <el-table-column prop="Duration" :label="$t('wms.timPeriod')"/>
              <el-table-column prop="DataStatus" :label="$t('wms.firstStatus')">
                <template #default="scope">
                  <el-tag effect="dark"
                          :type="scope.row.DataStatus=='正常'? 'success': 'danger'"
                          size="large"
                          style="width:80px">
                    {{ scope.row.DataStatus }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="TodayTotalQty" :label="$t('iot.cumulativeToday')">
                <template #default="scope">
                  <el-tag effect="dark" size="large"
                          style="width: auto;font-weight: 600;font-size: 15px;padding: 0 10px">
                    {{ scope.row.TodayTotalQty }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
            <div class="demo-pagination-block">
              <el-pagination :currentPage="data.currentPage" :page-size="data.pageSize" :page-sizes="[20, 30, 50,100]"
                             :small="small" :disabled="disabled" :background="background"
                             layout="total, sizes, prev, pager, next, jumper"
                             :total="data.total" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
            </div>
          </div>
        </div>
      </el-container>
    </el-container>
  </fullScreenContainer>
</template>

<script setup>
import aflLoading from '@/components/loading'
import fullScreenContainer from '@/components/fullScreenContainer'
import iconFont from '@/components/IconFont/iconFont'
import { provide, reactive, ref, onMounted, defineEmits, watch } from 'vue'
import ScaleBox from 'vue3-scale-box'
import useI18n from '@/hooks/language'
import config from '@/config'
import { getProductDataByDate, getDicItemByItemCode, dicItemByCode } from '@/api/mesApi'

const { t } = useI18n()

// 表格绑定的样式
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

// 定义变量
const data = reactive({
  ready: false,
  period: [], // 周期
  processName: 'all', // 工序名称
  pointName: 'all', // 工序名称
  status: 'all',
  tablesList: [],
  currentPage: 1,
  pageSize: 20,
  total: 0,
  options: [
    {
      value: 'all',
      label: t('mes.all')
    },
    {
      value: 'JKJ',
      label: t('iot.sawCutting')
    },
    {
      value: 'PE',
      label: 'PE'
    },
    {
      value: 'DR',
      label: t('iot.packAndWrap')
    }],
  optionName: [],
  optionStatus: [{
    label: t('mes.all'),
    value: 'all'
  }, {
    label: t('wms.unextended'),
    value: 'OK'
  }, {
    label: t('iot.abnormal'),
    value: 'NG'
  }]
})

onMounted(async () => {
  data.period[0] = times()
  data.period[1] = times()
  data.ready = true
  point()
  table()
  setTime()
})

const setTime = () => {
  setInterval(async () => {
    table()
  }, 6000)
}

const point = () => {
  dicItemByCode({ itemcode: 'ProcessAndLocation' }).then(res => {
    data.optionName = [{
      label: t('mes.all'),
      value: 'all',
      remark: 'all'
    }]
    res.forEach(item => {
      data.optionName.push({
        label: item.value,
        value: item.text,
        remark: item.remark
      })
    })
  })
}
// 表格获取数据
const table = () => {
  getProductDataByDate({
    StartTime: data.period[0],
    EndTime: data.period[1],
    PageSize: data.pageSize,
    CurrentPage: data.currentPage,
    ProcessCode: data.processName,
    LocationCode: data.pointName,
    Status: data.status
  }).then(res => {
    data.tablesList = []
    data.total = 0
    if (res.Status === 200) {
      data.tablesList = res.LstProductData
      data.total = res.TotalDataCount || 0
    } else {
      data.tablesList = []
      data.total = 0
    }
  })
}
const onSubmit = () => {
  table()
}

const onRest = () => {
  data.period[0] = times()
  data.period[1] = times()
  data.currentPage = 1
  data.pageSize = 20
  data.pointName = 'all'
  data.processName = 'all'
  data.status = 'all'
  point()
  table()
  data.options = [
    {
      value: 'all',
      label: t('mes.all')
    },
    {
      value: 'JKJ',
      label: t('iot.sawCutting')
    },
    {
      value: 'PE',
      label: 'PE'
    },
    {
      value: 'DR',
      label: t('iot.packAndWrap')
    }]
}

const handleSizeChange = (val) => {
  data.pageSize = val
  table()
}
const handleCurrentChange = (val) => {
  data.currentPage = val
  table()
}

const times = () => {
  const a = new Date()
  const year = a.getFullYear()
  const month = ((a.getMonth() + 1) > 10 ? (a.getMonth() + 1).toString() : ('0' + (a.getMonth() + 1)).toString())
  const date = (a.getDate() > 10 ? a.getDate().toString() : ('0' + a.getDate()).toString())
  return year + '-' + month + '-' + date + ' 00:00:00'
}

// 工序选择去判断点位
const pointSelect = (value) => {
  const filterBy = 'remark'
  const filteredArray = data.optionName.filter(item => item[filterBy].toLowerCase().includes(value.toLowerCase()))
  data.optionName = filteredArray
}
// 点位选择去判断工序
const pointSelect2 = (value) => {
  const filterBy = 'value'
  const remark = data.optionName.filter(item => item[filterBy].toLowerCase().includes(value.toLowerCase()))[0].remark
  data.processName = remark
  const filteredArray = data.options.filter(item => item[filterBy].toLowerCase().includes(remark.toLowerCase()))
  data.options = filteredArray
}
</script>

<style scoped lang="scss">
@forward "index";

#app,
#dv-full-screen-container {
  background-color: #EDF2F9
}

* {
  margin: 0;
  padding: 0;
}
</style>
